<template>
  <BasicModal v-bind="$attrs" destroyOnClose title="发票详情" :width="modalWidth" :footer="null" @register="registerModal">
    <Description size="middle" class="mt-3" title="详情信息" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="applyInvoiceInfo.data" :schema="applyInvoiceInfoSchema"></Description>
    <Description size="middle" class="mt-3" title="开票结果" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="applyInvoiceInfo.data" :schema="invoiceResultSchema"> </Description>
  </BasicModal>
</template>
<script lang="ts" setup>
import { reactive, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { DescItem, Description } from '@apps/antd-admin/src/components/description';
import { getApplyInvoiceDetail } from '../data/api';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';

const { getIsMobile } = useAppInject();
const modalWidth = ref('850px');
if (unref(getIsMobile)) {
  modalWidth.value = '80%';
}

let applyInvoiceInfo: Recordable = reactive({ data: {} });
const applyInvoiceInfoSchema: DescItem[] = [
  {
    field: 'createTime',
    label: '申请时间',
    span: 3,
  },
  {
    field: 'invoiceState',
    label: '开票状态',
    span: 3,
    render: (curVal, data) => {
      let invoiceStateArray = [
        { label: '已提交', value: 0 },
        { label: '已开票', value: 1 },
        { label: '已作废', value: 2 },
        { label: '开票中', value: 3 },
        { label: '冲红中', value: 4 },
      ];
      const invoiceState: any = invoiceStateArray.find(item => item.value == curVal);
      if (invoiceState) {
        return invoiceState.label;
      }
      return '';
    },
  },
  {
    field: 'userName',
    label: '会员姓名',
    span: 3,
  },
  {
    field: 'mobile',
    label: '手机号',
    span: 3,
  },
  {
    field: 'vipCardNo',
    label: '会员卡号',
    span: 3,
  },
  {
    field: 'vipCardState',
    label: '会员卡状态',
    span: 3,
    render: (curVal, data) => {
      let vipCardStateArray = [
        { label: '待激活', value: 0 },
        { label: '正常', value: 1 },
        { label: '已过期', value: 2 },
        { label: '未开通', value: 3 },
        { label: '未通过', value: 4 },
        { label: '冻结', value: 5 },
        { label: '退卡中', value: 6 },
        { label: '已退卡', value: 7 },
        { label: '已转卡', value: 8 },
        { label: '已转赠', value: 9 },
        { label: '冻结（延时开通）', value: 10 },
      ];
      const vipCardState: any = vipCardStateArray.find(item => item.value == curVal);
      if (vipCardState) {
        return vipCardState.label;
      }
      return '';
    },
  },
  {
    field: 'paywayName',
    label: '收款方式',
    span: 3,
  },
  {
    field: 'airportName',
    label: '开卡地区',
    span: 3,
  },
  {
    field: 'employeeName',
    label: '销售姓名',
    span: 3,
  },
  {
    field: 'openDate',
    label: '开卡日期',
    span: 3,
  },
  {
    field: 'payAmount',
    label: '开票金额',
    span: 3,
  },
  {
    field: 'userEmail',
    label: '接收邮箱',
    span: 3,
  },
  {
    field: 'invoiceCompanyInfo',
    label: '公司名称',
    span: 4,
  },
  {
    field: 'kpCode',
    label: '公司税号',
    span: 4,
  },
  {
    field: 'kpType',
    label: '开票类型',
    span: 3,
    render: (curVal, data) => {
      let kpTypeArray = [
        { label: '数电普票', value: 'pc' },
        { label: '数电专票', value: 'bs' },
      ];
      const kpType: any = kpTypeArray.find(item => item.value == curVal);
      if (kpType) {
        return kpType.label;
      }
      return '';
    },
  },
  {
    field: 'invoiceRemark',
    label: '开票备注',
    span: 4,
  },
  {
    field: 'otherRemark',
    label: '额外备注',
    span: 4,
  },
];

const invoiceResultSchema: DescItem[] = [
  {
    field: 'emailNotifyStatus',
    label: '邮件通知状态',
    span: 3,
    render: (curVal, data) => {
      let emailNotifyStatusArray = [
        { label: '未交付', value: 0 },
        { label: '交付成功', value: 1 },
        { label: '交付失败', value: 2 },
        { label: '交付中', value: 3 },
        { label: '不会交付', value: 4 },
      ];
      const emailNotifyStatus: any = emailNotifyStatusArray.find(item => item.value == curVal);
      if (emailNotifyStatus) {
        return emailNotifyStatus.label;
      }
      return '';
    },
  },
  {
    field: 'jpgUrl',
    label: '发票预览地址',
    span: 3,
  },
  {
    field: 'pdfUrl',
    label: '发票pdf地址',
    span: 8,
  },
];

const [registerModal, { setModalProps }] = useModalInner(async data => {
  let applyInvoiceId = data.applyInvoiceId;
  getApplyInvoiceDetail({
    applyInvoiceId: applyInvoiceId,
    handlerName: 'busApplyInvoiceGetHandler',
  }).then(result => {
    applyInvoiceInfo.data = result;
  });
});
</script>
